<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="kaoshi.css">
</head>

<body>
    <div class="form">
        <h2>表单<span>Subtext for header</span></h2>
        <hr>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail" class="col-sm-2 control-label">姓名:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail"
                        placeholder="只能包含数字字母下划线,且数字不能开头,长度在8~16之间"><span name="username"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword1" class="col-sm-2 control-label">联系电话:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword1" placeholder="如果格式有错误输入框会变红提示">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword1" class="col-sm-2 control-label">学历:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword2" placeholder="如果校验正确,绿色表示通过">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword1" class="col-sm-2 control-label">年龄:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Amount">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword1" class="col-sm-2 control-label">期望薪资:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword4" placeholder="Amount">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success" name="save">保存</button>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success" name="resert">重置</button>
                </div>
            </div>
        </form>
    </div>
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>联系电话</td>
                <td>学历</td>
                <td>年龄</td>
                <td>期望薪资</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div class="a">
        <h2>请修改信息</h2>
        <p>姓名: <input type="text" class="a1"></p>
        <p>联系电话: <input type="text" class="a2"></p>
        <p>学历: <input type="text" class="a3"></p>
        <p>年龄: <input type="text" class="a4"></p>
        <p>期望薪资: <input type="text" class="a5"></p>
        <button class="a6">关闭</button>
        <button class="a7">保存修改</button>
        <p style="color:red">鼠标按下触发拖动,抬起拖动消失</p>
    </div>
    <script src="jQuery.js"></script>
    <script>
            $('form').submit(function () { return false })
            const tbody = document.querySelector('tbody')
            const a = document.querySelector('.a')
            const body = document.querySelector('body')
            let arr = []
            $('#inputPassword1').on('input', function () {
                if ($('#inputPassword1').val().length !== 11) {
                    return $('#inputPassword1').css({ "border": "1px solid red" })
                } else {
                    $('#inputPassword1').css({ "border": "1px solid green" })
                }
            })
            $('[name="save"]').click(function () {
                window.localStorage.name = $('#inputEmail').val()
                window.localStorage.phone = $('#inputPassword1').val()
                window.localStorage.xueli = $('#inputPassword2').val()
                window.localStorage.age = $('#inputPassword3').val()
                window.localStorage.qiwangxizi = $('#inputPassword4').val()
                arr.push({ name: window.localStorage.name, phone: window.localStorage.phone, xueli: window.localStorage.xueli, age: window.localStorage.age, qiwangxizi: window.localStorage.qiwangxizi })
                setPage() 
                console.log(arr)
            })


            $('[name=resert]').click(function () {
                $('#inputPassword1').val('')
                $('#inputPassword2').val('')
                $('#inputPassword3').val('')
                $('#inputPassword4').val('')
                $('#inputEmail').val('')
            })
            function setPage() {
                let str = ''
                arr.forEach(function (item, key) {
                    str += `<tr><td>${item.name}</td><td>${item.phone}</td><td>${item.xueli}</td><td>${item.age}</td><td>${item.qiwangxizi}</td><td><button name="del" index="${key}">删除</button><button name="xiugai" index="${key}">修改</button></td></tr>`

                })
                tbody.innerHTML = str
            }
            tbody.addEventListener('click', function (event) {

                if (event.target.getAttribute('name') === "del") { arr.splice(Number(event.target.getAttribute('index')), 1); setPage() }
                if (event.target.getAttribute('name') === "xiugai") {
                    $('.a').css({ 'display': 'block' })
                    let b = Number(event.target.getAttribute('index'))
                    
                    $('.a7').click(function () {
                        arr[b] = { name: $('.a1').val(), phone: $('.a2').val(), xueli: $('.a3').val(), age: $('.a4').val(), qiwangxizi: $('.a5').val() }
                        
                        setPage()
                        console.log(arr)
                    
                        $('.a').css({ 'display': 'none' })
                    })
                    $('.a6').click(function () {
                        $('.a').css({ 'display': 'none' })
                    })
                    a.onmousedown = function (e1) {
                        var x1 = e1.clientX;
                        var y1 = e1.clientY;
                        var l1 = this.offsetLeft;
                        var t1 = this.offsetTop;
                        window.onmousemove = function (e2) {
                            var x2 = e2.clientX;
                            var y2 = e2.clientY;
                            var l2 = l1 + (x2 - x1);
                            var t2 = t1 + (y2 - y1);
                            l2 = l2 < 0 ? 0 : (l2 > window.innerWidth - a.offsetWidth ? window.innerWidth - a.offsetWidth : l2);
                            t2 = t2 < 0 ? 0 : (t2 > window.innerHeight - a.offsetHeight ? window.innerHeight - a.offsetHeight : t2);
                            a.style.left = l2 + `px`;
                            a.style.top = t2 + `px`;
                        }
                    }
                      a.onmouseup = function(){
                          window.onmousemove = null;
                      }
                }
            })
        


        



    </script>

</body>

</html>